<template>
  <div class="login">
    <div class="from">
      <div class="title">萧寂</div>
      <el-input
        v-model="input"
        size="large"
        style="width: 400px"
        placeholder="请输入您的账号"
        :prefix-icon="user"
      />
      <div class="password">
        <el-input
          v-model="password"
          @keyup.enter="login"
          size="large"
          type="password"
          style="width: 400px"
          placeholder="请输入您的密码"
          show-password
          :prefix-icon="lock"
        />
      </div>
      <div class="login-btn" @click="login">登录</div>
      <div>游客登录账号同密码：admin</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
const input = ref("");
const password = ref("");
const router = useRouter();
// const data:any = reactive({});

const user = ref(User);
const lock = ref(Lock);

// 游客路由配置
const guestRoutes = {
  nav: [
    {
      parentId: "1",
      index: "1", // 随便给
      icon: "icon-shouye",
      title: "首页",
      name: "home", // <— 路由 name
      path: "/home", // <— 一级路径
      component: "shouYe/index", // <— 组件位置
      menuType: 0,
      meta: { check: true },
    },
    {
      parentId: "2",
      index: "2",
      title: "设备管理",
      icon: "icon-shebei",
      type: "group",
      children: [
        {
          index: "2-1",
          title: "设备列表",
          name: "shebei",
          path: "/shebei",
          component: "shebei/shebei",
          menuType: 0,
          meta: {
            selectIndex: "2-1",
            check: true,
          },
        },
      ],
    },
    {
      parentId: "3",
      index: "3",
      title: "模块管理",
      icon: "icon-mokuai",
      type: "group",
      children: [
        {
          index: "3-1",
          title: "模块列表",
          name: "mokuai",
          path: "/mokuai",
          component: "mokuai/Mokuai",
          menuType: 0,
          meta: {
            selectIndex: "3-1",
            check: true,
          },
        },
      ],
    },
    {
      parentId: "4",
      index: "4",
      title: "标靶检测",
      icon: "icon-shebei",
      type: "group",
      children: [
        {
          index: "4-1",
          title: "报警列表",
          name: "jingIndex",
          path: "/jingIndex",
          component: "biaoba/index",
          menuType: 0,
          meta: {
            selectIndex: "4-1",
            check: true,
          },
        },
        {
          index: "4-2",
          title: "标靶检测",
          name: "biaoba",
          path: "/biaoba",
          component: "biaoba/biaoba",
          menuType: 0,
          meta: {
            selectIndex: "4-2",
            check: true,
          },
        },
        {
          index: "4-3",
          title: "标靶报警",
          name: "baojing",
          path: "/baojing",
          component: "biaoba/baojing",
          menuType: 0,
          meta: {
            selectIndex: "4-3",
            check: true,
          },
        },
        {
          index: "4-4",
          title: "报警等级",
          name: "dengji",
          path: "/dengji",
          component: "biaoba/dengji",
          menuType: 0,
          meta: {
            selectIndex: "4-4",
            check: true,
          },
        },
      ],
    },
  ],
};

const login = async () => {
  console.log("登录", input.value, password.value);

  // 游客登录（admin/admin）
  if (input.value === "admin" && password.value === "admin") {
    const menus = guestRoutes.nav;
    const wuyemenusJSON = JSON.stringify(menus);
    localStorage.setItem("wuyemenusJSON", wuyemenusJSON);
    localStorage.setItem("wuyetoken", "guest-token"); // 设置游客token
    router.push("/home");
    ElMessage({ message: "游客登录成功!", type: "success" });
    return;
  }
};

//添加监听
onBeforeMount(() => {
  console.log("组件首次挂载之前");
});

onMounted(() => {
  console.log("组件首次挂载完成");
});
</script>
<style lang="less" scoped>
.login {
  background-color: #f2f3f5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .from {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    padding: 2rem;
    // box-shadow: ;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    .title {
      color: black;
      font-size: 18px;
      font-weight: bold;
      background-color: white;
      text-align: center;
      margin-bottom: 2rem;
    }

    .password {
      margin-top: 1rem;
    }

    .login-btn {
      margin-top: 1.5rem;
      color: white;
      text-align: center;
      padding: 8px 0;
      border-radius: 5px;
      background-color: #409eff;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>